<template>
  <div class="base-container">
    <!--年份过滤-->
    <t-form ref="form" :data="queryParams" label-width="80">
      <t-row style="border-bottom: 1px solid #e5e6eb; margin-bottom: 10px">
        <t-col :span="11" class="query-form-inline">
          <t-form-item label="填表年份" name="years">
            <t-select @change="getMyProcessTables" style="width: 240px" v-model="queryParams.years" :options="years" placeholder="请选择填表年份" />
          </t-form-item>
        </t-col>
      </t-row>
    </t-form>
    <!--待填表单列表-->
    <t-table
      rowKey="id"
      :data="myTables"
      :columns="columns"
      bordered
      hover
    >
      <template #fill="{ row }">
        <t-tag :theme="row.fill==='1'?'success':'warning'" variant="light">{{row.fill==='1'?'是':'否'}}</t-tag>
      </template>
      <!-- <template #approveStatus="{ row: { table: { approveStatus: sta }}}">
        <div v-if="sta">
          <t-tag v-if="sta === '1'" theme="default" variant="light">暂存</t-tag>
          <t-tag v-if="sta === '2'" theme="primary" variant="light">审批中</t-tag>
          <t-tag v-if="sta === '3'" theme="success" variant="light">通过</t-tag>
          <t-tag v-if="sta === '4'" theme="danger" variant="light">退回</t-tag>
        </div>
        <t-tag v-else theme="warning" variant="light">未提交</t-tag>
      </template> -->
      <template #op="{ row }">
        <t-button v-if="row.fill!=='0'" @click="handleShow(row)" size="small" variant="text" class="t-button-link" theme="success">
          <t-icon name="browse" slot="icon" />
          查看
        </t-button>
        <t-button  @click="handleEdit(row)" size="small" variant="text" class="t-button-link" :theme="row.fill==='1'?'primary':'warning'">
          <t-icon name="edit-1" slot="icon" />
          {{row.fill==='1'?'修改':'填写'}}
        </t-button>
      </template>
    </t-table>
    <div v-if="selectedTableCode === 'DWJBXX'">
      <tab-unit-base-info-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
    <div v-if="selectedTableCode === 'RYGM'">
      <tab-personnel-size-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
    <div v-if="selectedTableCode === 'KYTJ'">
      <tab-research-conditions-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
    <div v-if="selectedTableCode === 'JTYSYJKFJFZC'">
      <tab-research-and-development-expenditure-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
    <div v-if="selectedTableCode === 'JTYSKJXM'">
      <tab-technology-projec-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
    <div v-if="selectedTableCode === 'JTYSKJCG'">
      <tab-technological-achievements-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
    <div v-if="selectedTableCode === 'GJKJHZYJL'">
      <tab-cooperation-and-communication-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
    <div v-if="selectedTableCode === 'JTHYZDSYS'">
      <tab-key-laboratory-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
    <div v-if="selectedTableCode === 'BZHQK'">
      <tab-standardization-form
        v-if="dialog.open_info_detail"
        :visible.sync="dialog.open_info_detail"
        :infoId="selectedTable.id"
        :edit="dialog.isEditForm"
        @reload="getMyProcessTables"
      />
    </div>
  </div>
</template>

<script>
import TabUnitBaseInfoForm from '../TabUnitBaseInfo/form.vue';
import TabPersonnelSizeForm from '../TabPersonnelSize/form.vue';
import TabResearchConditionsForm from '../TabResearchConditions/form.vue';
import TabResearchAndDevelopmentExpenditureForm from '../TabResearchAndDevelopmentExpenditure/form.vue';
import TabTechnologyProjecForm from '../TabTechnologyProjec/form.vue';
import TabTechnologicalAchievementsForm from '../TabTechnologicalAchievements/form.vue';
import TabCooperationAndCommunicationForm from '../TabCooperationAndCommunication/form.vue';
import TabKeyLaboratoryForm from '../TabKeyLaboratory/form.vue';
import TabStandardizationForm from '../TabStandardization/form.vue';

import { curYear, genYears } from '../genYears.js'


export default {
  name: 'process',
  dicts: ['approve_status'],
  components: {
    TabUnitBaseInfoForm,
    TabPersonnelSizeForm,
    TabResearchConditionsForm,
    TabResearchAndDevelopmentExpenditureForm,
    TabTechnologyProjecForm,
    TabTechnologicalAchievementsForm,
    TabCooperationAndCommunicationForm,
    TabKeyLaboratoryForm,
    TabStandardizationForm
  },
  data() {
    return {
      myTables: [],
      columns: [
        { colKey: 'serial-number', title: '表单序号', width: 105, align: 'center' },
        // { colKey: 'years', title: '年度', width: 100, align: 'center' },
        { colKey: 'tableCode', title: '表单号', width: 140, ellipsis: true, align: 'center' },
        { colKey: 'tableName', title: '表单名称', align: 'center' },
        { colKey: 'fill', title: '是否填写', width: 105, align: 'center' },
        // { colKey: 'approveStatus', title: '审批状态', width: 105, align: 'center' },
        { colKey: 'op', title: '操作', width: 200, align: 'center' },
      ],
      years: genYears(),
      queryParams: {
        years: curYear
      },
      selectedTable: {},
      selectedTableCode: '',
      dialog: {
        open_info_detail: false,
        isEditForm: false
      },
    }
  },
  created() {
    this.getMyProcessTables()
  },
  methods: {
    async getMyProcessTables() {
      const { years } = this.queryParams
      try {
        let { rows } = await this.$api.kjtjdc.table.getMyTables(years);
        rows = rows.map(row => {
          row.table = {}
          let apiKey
          switch (row.tableCode) {
          case 'DWJBXX':
            apiKey = 'unitInfo'
            break;
          case 'RYGM':
            apiKey = 'personInfo'
            break;
          case 'KYTJ':
            apiKey = 'researchCondition'
            break;
          case 'JTYSYJKFJFZC':
            apiKey = 'devFundingSpend'
            break;
          case 'JTYSKJXM':
            apiKey = 'projectInfo'
            break;
          case 'JTYSKJCG':
            apiKey = 'resultInfo'
            break;
          case 'GJKJHZYJL':
            apiKey = 'cooperationInfo'
            break;
          case 'JTHYZDSYS':
            apiKey = 'labInfo'
            break;
          case 'BZHQK':
            apiKey = 'standardizedInfo'
            break;
          default:
            break;
          }
          if (apiKey) {
            this.$api.kjtjdc.table[apiKey].getMy(years).then(({rows}) => {
              const info = rows[0]
              if (info) {
                row.table = info
                row.fill = '1'
              }
            })
          }
          return row
        })
        this.myTables = rows
      } catch (e) {
        this.$message.error(e)
      }
    },
    handleEdit(row) {
      this.selectedTableCode = row.tableCode
      this.selectedTable = row.table
      this.dialog.open_info_detail = true
      this.dialog.isEditForm = true
    },
    handleShow(row) {
      this.selectedTableCode = row.tableCode
      this.selectedTable = row.table
      this.dialog.open_info_detail = true
      this.dialog.isEditForm = false
    },
    // 检查编辑按钮是否可点击
    checkNotEditable(row) {
      const approveStatus = row.table?.approveStatus
      if (approveStatus) {
        return approveStatus !== '1' || approveStatus !== '4' // 审批状态为不为暂存和退回就不可点击
      }
      return false
    },
  }
}
</script>

<style lang="less" scoped></style>
